<template>
  <div class="nav-header">
    <div class="nav-header-middle">
      <el-menu router default-active="/index" class="el-menu--horizontal">
        <template v-for="item in manage">
          <el-menu-item :index="item.router">
              <span>{{ item.name }}</span>
          </el-menu-item>
        </template>
    </el-menu>
    </div>

    <div class="nav-header-right">
          <a @click="handleLoginout" class="nav-loginout">退出登录</a>
    </div>
  </div>
</template>
<script>
export default {
  name: "NavHeader",
  data() {
    return {
      manage: [
        {name: "主页",
          router:"/index",
        },
        {name: "音乐",
          router:"/music",
        },
        {name: "影视",
          router:"/video",
        },
        {name: "专访",
          router:"/interview",
        },

      ]
    }
  },
  methods:{
    handleLoginout(){
      this.$router.push({name:'login'})

    },
  }
}
</script>
<style scoped>
  .nav-header{
    background: rgb(255, 111, 20);
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 99;
    font-size: 22px;
    color: white;
    padding:0 50px;
    overflow: hidden;
  }
  .nav-header-left{
    float: left;
    background-color: rgb(254, 85, 12);
    width: 214px;
  }
  .el-icon-menu{
    margin-left: 20px;
  }
  .nav-header-logo{
    margin-left: 40px;
    height: 60px;
    line-height: 60px;
  }
  .nav-header-right{
    float: right;
  }
  .nav-header-middle{
    float: left;

  }
  .el-menu--horizontal>.el-menu-item{
    background-color:rgb(255, 111, 20);
    font-size: .75em;
    color:white;
  }
  .el-menu--horizontal>.el-menu-item:hover{
    background-color:rgb(255, 111, 20);
  }
  .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
    background-color:rgb(255, 111, 20);
    color:white;
  }
  .el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: 2px solid white;
    color:white;
  }
  .nav-loginout{
    font-size: .75em;
    height: 60px;
    line-height: 60px;
  }
  .nav-loginout:hover{
    opacity: .8;

  }
</style>